// 需要注意的问题
// 1，代码编写规范且必须规范
// 2，原生和组件结合，怎么方便怎么来
// 3，修改添加的bug
// 4，修改编辑的bug
// 5，加上搜索
// 6，加分页
<template>
  <div>
    <table style="width: 80%; height: 480px; margin: 50px auto">
      <tr style="float: left">
        <td>
          <Button type="primary" @click="insert">新增</Button>
        </td>
        <td>
          <label prop="name"> 姓名： </label>
        </td>
        <td>
          <Input
            placeholder="请输入要查询的姓名"
            v-model="inputName"
            style="width: 200px"
          />
        </td>
        <td>
          <Button type="info" @click="selectName">查询姓名</Button>
        </td>
        <td>
          <label prop="name"> 年龄： </label>
        </td>
        <td>
          <Input
            placeholder="请输入要查询的年龄"
            v-model="inputAge"
            style="width: 200px"
          />
        </td>
        <td>
          <Button type="info" @click="selectAge">查询年龄</Button>
        </td>
      </tr>
      <tr>
        <Table border :columns="columns" :data="newdata" height="500"></Table>
        <Page
          :total="dataCount"
          :page-size="pageSize"
          show-sizer
          class="paging"
          :current="pagecon"
          :page-size-opts="pagenum"
          @on-change="changepage"
          @on-page-size-change="pagesize"
        ></Page>
        <!-- on-page-size-change:切换每页条数时的回调，返回切换后的每页条数   pageSize每页条数-->
      </tr>
    </table>

    <!--↓↓↓ table更新的表单 ↓↓↓-->
    <!-- 
         v-model 是否显示弹窗
         :footer-hide 是否显示底部(包括2个默认按钮)
         title 弹窗标题
         ok-text 默认按钮确定的名称
         cancel-text 默认按钮关闭的名称
         width 弹窗宽度，影响内容控件的间距
         on-ok 默认确定按钮绑定事件
         on-cancel 默认取消按钮绑定事件
         on-visible-change 弹窗打开关闭事件
         -->
    <Modal
      v-model="modal.window_udpTable"
      :footer-hide="true"
      v-bind:title="modal.title"
      width="800"
      @on-ok="save('formData_table')"
      @on-visible-change="reset('formData_table')"
    >
      <!--  -->
      <Form :model="formData_table" :label-width="100" ref="formData_table">
        <!--表单验证， 给 Form 设置属性 rules-->
        <FormItem label="姓名:" prop="name">
          <Input v-model="formData_table.name" placeholder="请输入姓名"></Input>
        </FormItem>
        <FormItem label="工号:" prop="num">
          <Input
            v-model="formData_table.num"
            placeholder="请输入工号"
          ></Input> </FormItem
        ><FormItem label="年龄:" prop="age">
          <Input
            v-model="formData_table.age"
            placeholder="请输入年龄"
          ></Input> </FormItem
        ><FormItem label="电话:" prop="tel">
          <Input
            v-model="formData_table.tel"
            placeholder="请输入电话"
          ></Input> </FormItem
        ><FormItem label="总公司:" prop="job1">
          <Input
            v-model="formData_table.job1"
            placeholder="请输入总公司"
          ></Input>
        </FormItem>
        <FormItem label="分公司:" prop="job2">
          <Input
            v-model="formData_table.job2"
            placeholder="请输入分公司"
          ></Input> </FormItem
        ><FormItem label="业务部:" prop="job3">
          <Input
            v-model="formData_table.job3"
            placeholder="请输入业务部"
          ></Input> </FormItem
        ><FormItem label="子部:" prop="job4">
          <Input
            v-model="formData_table.job4"
            placeholder="请输入子部"
          ></Input> </FormItem
        ><FormItem label="业务部申请:" prop="job5">
          <Input
            v-model="formData_table.job5"
            placeholder="请输入业务部申请"
          ></Input>
        </FormItem>
        <FormItem>
          <!-- 提交的单击事件  在下面的方法里面写好 -->
          <Button type="primary" @click="save('formData_table')">提交</Button>
          <Button @click="reset('formData_table')" style="margin-left: 8px"
            >重置</Button
          >
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      num: "",
      age: "",
      tel: "",

      // 表单
      columns: [
        {
          title: "序号",
          // sortable: true,
          // key: "name",
          // type: "index",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.pagecon - 1) * this.pageSize + 1
            );
          },
        },

        {
          title: "姓名",
          key: "name",
        },
        {
          title: "工号",
          key: "num",
        },
        {
          title: "总公司",
          key: "job1",
        },
        {
          title: "分公司",
          key: "job2",
        },
        {
          title: "业务部",
          key: "job3",
        },
        {
          title: "子部",
          key: "job4",
        },
        {
          title: "业务部申请",
          key: "job5",
        },
        {
          title: "年龄",
          key: "age",
        },
        {
          title: "手机号",
          key: "tel",
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      // this.(params.index);
                      this.edit(params.row, params.index);
                    },
                  },
                },
                "编辑"
              ),

              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      // this.show(params.index);
                      this.dev(params.index);
                    },
                  },
                },
                "传参"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                      // this.show(params.index);
                      // console.log(params);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],

      // 数据库
      data: [
        {
          // index: 3,
          name: "张翼",
          num: 33301,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "21",
          tel: "13111681101",
        },
        {
          // index: 3,
          name: "张而",
          num: 33302,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "32",
          tel: "13111681102",
        },
        {
          // index: 3,
          name: "张三",
          num: 33303,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "23",
          tel: "13111681103",
        },
        {
          // index: 3,
          name: "张思",
          num: 33304,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "34",
          tel: "13111681104",
        },
        {
          // index: 3,
          name: "张舞",
          num: 33305,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "25",
          tel: "13111681105",
        },
        {
          // index: 3,
          name: "张留",
          num: 33302,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "36",
          tel: "13111681106",
        },
        {
          // index: 3,
          name: "张琦",
          num: 33307,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "27",
          tel: "13111681107",
        },
        {
          // index: 3,
          name: "张霸",
          num: 33308,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "38",
          tel: "13111681108",
        },
        {
          // index: 3,
          name: "张久",
          num: 33309,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "29",
          tel: "13111681109",
        },
        {
          // index: 3,
          name: "张诗",
          num: 33310,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "40",
          tel: "13111681110",
        },
        {
          // index: 3,
          name: "张依依",
          num: 33311,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "21",
          tel: "13111681111",
        },
        {
          // index: 3,
          name: "张依尔",
          num: 33312,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "32",
          tel: "13111681112",
        },
        {
          // index: 3,
          name: "张依三",
          num: 33313,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "23",
          tel: "13111681113",
        },
        {
          // index: 3,
          name: "张依思",
          num: 33314,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "24",
          tel: "13111681114",
        },
        {
          // index: 3,
          name: "张依舞",
          num: 33315,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "35",
          tel: "13111681115",
        },
        {
          // index: 3,
          name: "张依柳",
          num: 33316,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "26",
          tel: "13111681116",
        },
        {
          // index: 3,
          name: "张依琦",
          num: 33317,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "27",
          tel: "13111681117",
        },
        {
          // index: 3,
          name: "张依霸",
          num: 33318,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "38",
          tel: "13111681118",
        },
        {
          // index: 3,
          name: "张依久",
          num: 33319,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "39",
          tel: "13111681119",
        },
        {
          // index: 3,
          name: "张而诗",
          num: 33320,
          job1: "河南总公司",
          job2: "郑州分公司",
          job3: "金水区分部",
          job4: "人事",
          job5: "java",
          age: "40",
          tel: "13111681120",
        },
      ],

      // 新定义的空数组
      newdata: [],
      // 表单的定义总数据
      dataCount: 0,
      //当前页码
      pagecon: 1,
      // 每页条数（初始进去显示）
      pageSize: 5,
      data6:[],
      pagenum: [2, 4, 5, 10, 20],

      modal: {
        //弹窗属性设置数据
        window_udpTable: false, //更新table弹窗的显示状态  用于全局控制
        okText: "确定按钮文字",
        cancelText: "取消按钮文字",
        title: "我是标题...",
      },
      formData_table: {
        //表单控件数据
        name: "",
        num: "",
        age: "",
        tel: "",
        job1: "",
        job2: "",
        job3: "",
        job4: "",
        job5: "",
      },
      selectIndex: 0, //编辑行的索引
      inputName: "", //查询姓名输入框的值
      inputAge: "", //查询年龄输入框的值
      linshi: {}, //表格数据临时存放
      exportConfig: {
        //导入弹窗设置
        value: false,
        title: "导入数据",
        width: "270",
        footerHide: true,
      },
    };
  },
  methods: {
    // 路由跳转
    dev(index) {
      this.$router.push({
        path: "/AboutView",
        query: {
          name: `${this.data[index].name}`,
          num: `${this.data[index].num}`,
          tel: `${this.data[index].tel}`,
          job: `${this.data[index].job1}`,
          jobaddress: `${this.data[index].job1}-${this.data[index].job2}-${this.data[index].job3}-${this.data[index].job4}`,
        },
      });
    },
    //打开新增窗口
    insert() {
      this.modal.title = "新增";
      this.modal.window_udpTable = true;
    },
    save(name) {
      // 数据校验
      this.$refs[name].validate((valid) => {
        if (valid) {
          let title = this.modal.title;
          // 将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。
          var params = JSON.parse(JSON.stringify(this.formData_table));
          if (title == "新增") {
            if (
              this.formData_table.name == "" ||
              this.formData_table.tel == "" ||
              this.formData_table.num == "" ||
              this.formData_table.age == "" ||
              this.formData_table.job1 == "" ||
              this.formData_table.job2 == "" ||
              this.formData_table.job3 == "" ||
              this.formData_table.job4 == "" ||
              this.formData_table.job5 == ""
            ) {
              this.$Message.warning("新增失败，数据不能有空");
              this.modal.window_udpTable = true;
            } else {
              this.data.push(params); //新增一条
              this.$Message.success("新增成功");
            // 添加完之后没用重新获取总条数，需要加一句👇
              this.dataCount=this.data.length
            }
          }

          if (title == "编辑") {
            /* $set参数： 1 表格数据数组   2 修改的索引   3 需要保存的数据  */
            this.$set(this.data, this.selectIndex, params);
            this.$Message.success("修改成功!");
            // this.dataCount=this.data.length
          }
          this.modal.window_udpTable = false; //弹窗关闭
        } else {
          this.$Message.error("验证未通过!");
        }
      });
    },
    //打开编辑窗口
    edit(row, index) {
      this.selectIndex = index;
      this.modal.title = "编辑";
      this.modal.window_udpTable = true; //弹窗开启
      this.chong = "disabled";
      /* 
             浅拷贝把数据的地址赋值给对应变量，而没有把具体的数据复制给变量，变量会随数据值的变化而变化
                this.formData_table = row;
                this.formData_table = this.data[index]; 
                此处用深拷贝
                */
      this.formData_table = JSON.parse(JSON.stringify(row));
    },
    // 删除当前行
    remove(index) {
      // this.newdata.splice(index, 1);
      this.newdata.splice((this.pagecon - 1) * this.pageSize + index, 1);
      // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
      if (this.newdata.length < this.pageSize) {
        this.newdata = this.data;
      } else {
        this.newdata = this.data.slice(
          (this.pagecon - 1) * this.pageSize,
          this.pagecon * this.pageSize
        );
      }
      this.dataCount = this.newdata.length;
      
      this.$Message.success("删除成功!");
    },
    // 查询名字
    selectName() {
      // 获取表格数据
      var tabledata = JSON.parse(JSON.stringify(this.data));
      // console.log(this.linshi.length)
      //如果临时数据是空的，就给它赋值全部的表格数据
      if (this.linshi.length == undefined) {
        this.linshi = tabledata;
      }
      //如果输入框的内容是空的，给表格赋值临时存储的全部数据   等于查询全部的效果
      if (this.inputName == "") {
        this.data = this.linshi;
      } else {
        // 设置一个空的数组
        let arr = [];
        // 循环遍历
        for (let i = 0; i < tabledata.length; i++) {
          if (tabledata[i].name.indexOf(this.inputName) != -1) {
            // 如果表格数据包含了 输入框的数据
            arr.push(tabledata[i]);
          }
        }
        // 将查找出来的数据给表格
        this.data = arr;
      }
    },
    // 查询年龄
    selectAge() {
      // 获取表格数据
      var tabledata = JSON.parse(JSON.stringify(this.data));
      // console.log(this.linshi.length)
      //如果临时数据是空的，就给它赋值全部的表格数据
      if (this.linshi.length == undefined) {
        this.linshi = tabledata;
      }
      //如果输入框的内容是空的，给表格赋值临时存储的全部数据   等于查询全部的效果
      if (this.inputAge == "") {
        this.newdata = this.linshi;
      } else {
        // 设置一个空的数组
        let arr = [];
        // 循环遍历
        for (let i = 0; i < tabledata.length; i++) {
          if (tabledata[i].age.indexOf(this.inputAge) != -1) {
            // 如果表格数据包含了 输入框的数据
            arr.push(tabledata[i]);
          }
        }
        // 将查找出来的数据给表格
        this.newdata = arr;
      }
    },
    reset(name) {
      // 清除文本框  重置
      // console.log(name)
      // console.log(this.$refs[name])
      let title = this.modal.title;
      if (title != "编辑") {
        this.$refs[name].resetFields(); //前置条件： From表单设置属性 ref="formData_table"   ，ref和v-model保持一致
        // this.formData_table = Object.assign({}, this.defaultForm);  //第二种方式重置表单
      }
    },
    changepage(page) {
      this.pagecon=page
      //page
      // 前面的值是（page-1）*size，下一页是page*size,比如第三页，就是（3-1）*5
      this.newdata = this.data.slice(
        (page - 1) * this.pageSize,
        page * this.pageSize
      );
      console.log(page);
    },
    pagesize(size) {
      console.log(size);
      this.pageSize = size;
      this.changepage(1);
    },

    // 获取历史记录信息
    // handleListApproveHistory() {
    //   // 保存取到的所有数据
    //   this.ajaxHistoryData = testData.datalists;
    //   this.dataCount = testData.datalists.length;
    //   // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
    //   if (testData.histories.length < this.pageSize) {
    //     this.historyData = this.ajaxHistoryData;
    //   } else {
    //     this.historyData = this.ajaxHistoryData.slice(0, this.pageSize);
    //   }
    // },
    // changepage(index) {
    //   // 当前页码
    //   this.page = index;
    //   let _start = (index - 1) * this.pageSize;
    //   let _end = index * this.pageSize;
    //   this.historyData = this.ajaxHistoryData.slice(_start, _end);
    // },
    // pagesize(index) {
    //   let _start = (this.page - 1) * index;
    //   let _end = this.page * index;
    //   this.historyData = this.ajaxHistoryData.slice(_start, _end);
    //   // 当前展示条数
    //   this.pageSize = index;
    // },
  },
  created() {
    this.dataCount = this.data.length;
    this.newdata = this.data.slice(0, this.pageSize);
    // console.log(this);
  },
};
</script>